<template>
  <el-container>
    <el-header>
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      <el-button type="warning" @click="handleBatchDisable">批量禁用</el-button>
    </el-header>
    <el-main>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="会场" name="venue">
          <el-table
            :data="currentVenueData"
            style="width: 150%"
            ref="tableRef"
            @selection-change="handleSelectionChange"
            :scroll-x="true"
          >
            <el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>
            <el-table-column prop="id" label="ID" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="elemeId" label="会场ID" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="活动名称" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="content" label="活动描述" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="startDate" label="活动开始日期" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="endDate" label="活动结束日期" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="wechatAppId" label="微信appid" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="wechatLink" label="微信小程序链接" width="200" show-overflow-tooltip></el-table-column>
            <!-- 补充宽度并添加溢出提示 -->
            <el-table-column prop="aliCode" label="支付宝口令" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="aliUrl" label="支付宝url" width="200" show-overflow-tooltip></el-table-column>
            <!-- 补充宽度并添加溢出提示 -->
            <el-table-column prop="taoCode" label="淘口令" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="openTaoUrl" label="直接跳转链接" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="openTaoAppUrl" label="直接打开淘宝url" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="imgUrl" label="配图URL" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="elemeType" label="类型" width="80" show-overflow-tooltip>
              <template #default="scope">
                {{ getTypeText(scope.row.elemeType) }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100" show-overflow-tooltip>
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.elemeStatus)" size="small">
                  {{ getStatusText(scope.row.elemeStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="elemeDelete" label="删除状态" width="80" show-overflow-tooltip>
              <template #default="scope">
                {{ getDeleteStatusText(scope.row.elemeDelete) }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              width="220"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="small" type="warning" @click="handleUpdate(scope.row)">更新</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next, jumper,total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="红包" name="redPacket">
          <el-table
            :data="currentRedPacketData"
            style="width: 100%"
            ref="tableRef"
            @selection-change="handleSelectionChange"
          >
            <!-- 同步添加溢出提示和宽度 -->
            <el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>
            <el-table-column prop="id" label="ID" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="elemeId" label="会场ID" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="活动名称" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="content" label="活动描述" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="startDate" label="活动开始日期" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="endDate" label="活动结束日期" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="wechatAppId" label="微信appid" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="wechatLink" label="微信小程序链接" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="aliCode" label="支付宝口令" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="aliUrl" label="支付宝url" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="taoCode" label="淘口令" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="openTaoUrl" label="直接跳转链接" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="openTaoAppUrl" label="直接打开淘宝url" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="imgUrl" label="配图URL" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="elemeType" label="类型" width="80" show-overflow-tooltip>
              <template #default="scope">
                {{ getTypeText(scope.row.elemeType) }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100" show-overflow-tooltip>
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.elemeStatus)" size="small">
                  {{ getStatusText(scope.row.elemeStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="elemeDelete" label="删除状态" width="80" show-overflow-tooltip>
              <template #default="scope">
                {{ getDeleteStatusText(scope.row.elemeDelete) }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              width="220"
              show-overflow-tooltip
            >
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="small" type="warning" @click="handleUpdate(scope.row)">更新</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next, jumper,total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-main>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑' : '新增'"
      class="custom-dialog"
    >
      <el-form
        :model="formData"
        ref="formRef"
        label-width="120px"
        class="custom-form"
      >
        <el-form-item label="自增ID" prop="id" v-if="isEdit">
          <el-input v-model="formData.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="会场ID" prop="elemeId">
          <el-input v-model="formData.elemeId"></el-input>
        </el-form-item>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="活动描述" prop="content">
          <el-input type="textarea" v-model="formData.content"></el-input>
        </el-form-item>
        <el-form-item label="活动开始日期" prop="startDate">
          <el-date-picker
            v-model="formData.startDate"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="活动结束日期" prop="endDate">
          <el-date-picker
            v-model="formData.endDate"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="微信appid" prop="wechatAppId">
          <el-input v-model="formData.wechatAppId"></el-input>
        </el-form-item>
        <el-form-item label="微信小程序链接" prop="wechatLink">
          <el-input v-model="formData.wechatLink"></el-input>
        </el-form-item>
        <el-form-item label="支付宝口令" prop="aliCode">
          <el-input v-model="formData.aliCode"></el-input>
        </el-form-item>
        <el-form-item label="支付宝url" prop="aliUrl">
          <el-input v-model="formData.aliUrl"></el-input>
        </el-form-item>
        <el-form-item label="淘口令" prop="taoCode">
          <el-input v-model="formData.taoCode"></el-input>
        </el-form-item>
        <el-form-item label="直接跳转链接" prop="openTaoUrl">
          <el-input v-model="formData.openTaoUrl"></el-input>
        </el-form-item>
        <el-form-item label="直接打开淘宝url" prop="openTaoAppUrl">
          <el-input v-model="formData.openTaoAppUrl"></el-input>
        </el-form-item>
        <el-form-item label="配图URL" prop="imgUrl">
          <el-input v-model="formData.imgUrl"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="elemeType">
          <el-select v-model="formData.elemeType" placeholder="请选择">
            <el-option label="会场" value="1"></el-option>
            <el-option label="红包" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="elemeStatus">
          <el-select v-model="formData.elemeStatus" placeholder="请选择">
            <el-option label="未开始" value="1"></el-option>
            <el-option label="进行中" value="2"></el-option>
            <el-option label="已结束" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="删除状态" prop="elemeDelete">
          <el-radio-group v-model="formData.elemeDelete">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">删除</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, computed, watch, onMounted,nextTick } from 'vue'
import { add, getAllList } from '@/api/eleme/eleme.ts'

// 定义表格引用
const tableRef = ref(null)
// 定义选中的表格行数据
const selectedRows = ref([])
// 定义表单引用
const formRef = ref(null)
// 定义表单数据
const formData = ref({
  id: '',
  elemeId: '',
  name: '',
  content: '',
  startDate: '',
  endDate: '',
  wechatAppId: '',
  wechatLink: '',
  aliCode: '',
  aliUrl: '',
  taoCode: '',
  openTaoUrl: '',
  openTaoAppUrl: '',
  imgUrl: '',
  elemeType: '',
  elemeStatus: '',
  elemeDelete: ''
})
// 定义当前激活的标签页
const activeTab = ref('venue')
// 初始化表格数据
const tableData = ref({
  venue: [],
  redPacket: []
})
// 控制弹窗显示隐藏
const dialogVisible = ref(false)
// 判断是编辑还是新增
const isEdit = ref(false)

// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 计算当前会场页数据
const currentVenueData = computed(() => tableData.value.venue)
// 计算当前红包页数据
const currentRedPacketData = computed(() => tableData.value.redPacket)

// 封装数据获取方法
const fetchData = async () => {
  try {
    const res = await getAllList(
      currentPage.value,
      pageSize.value
    )
    // 假设 res 结构为 { venue: [], redPacket: [], total: 总数据量 }
    // 若不是此结构，需要根据实际返回结果调整
    tableData.value = {
      venue: res.rows,
      redPacket: res.rows
    }
    console.log("shuju",res.total)
    total.value = res.total
    console.log("now",total.value)
    await nextTick()
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

// 监听分页参数和标签页变化
watch([currentPage, pageSize, activeTab], () => {
  fetchData()
})

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})

// 处理表格选中行变化
const handleSelectionChange = (val) => {
  selectedRows.value = val
}

// 处理标签页点击事件
const handleTabClick = (tab) => {
  console.log('当前选中的标签页:', tab.name)
}

// 处理新增
const handleAdd = () => {
  isEdit.value = false
  Object.keys(formData.value).forEach(key => {
    formData.value[key] = ''
  })
  dialogVisible.value = true
}

// 处理编辑
const handleEdit = (row) => {
  isEdit.value = true
  formData.value = { ...row }
  dialogVisible.value = true
}

// 处理删除
const handleDelete = async (row) => {
  // 这里需要调用删除接口，示例仅作占位，需根据实际情况修改
  // await deleteApi(row.id)
  await fetchData()
}

// 处理更新
const handleUpdate = (row) => {
  console.log('更新数据:', row)
  // 这里可添加实际的更新逻辑
}

// 处理批量删除
const handleBatchDelete = async () => {
  // 这里需要调用批量删除接口，示例仅作占位，需根据实际情况修改
  // await batchDeleteApi(selectedRows.value.map(item => item.id))
  selectedRows.value = []
  await fetchData()
}

// 处理批量禁用
const handleBatchDisable = async () => {
  // 这里需要调用批量禁用接口，示例仅作占位，需根据实际情况修改
  // await batchDisableApi(selectedRows.value.map(item => item.id))
  selectedRows.value = []
  await fetchData()
}

// 提交表单方法
const submitForm = async () => {
  try {
    if (isEdit.value) {
      // 这里需要调用编辑接口，示例仅作占位，需根据实际情况修改
      // await editApi(formData.value)
    } else {
      await add(formData.value)
    }
    dialogVisible.value = false
    await fetchData()
  } catch (error) {
    console.error('提交表单失败:', error)
  }
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    '1': '未开始',
    '2': '进行中',
    '3': '已结束'
  }
  return statusMap[status] || ''
}

// 获取状态对应的标签类型
const getStatusType = (status) => {
  const typeMap = {
    '1': 'info',
    '2': 'success',
    '3': 'danger'
  }
  return typeMap[status] || ''
}

// 获取类型文本
const getTypeText = (type) => {
  const typeMap = {
    '1': '会场',
    '2': '红包'
  }
  return typeMap[type] || ''
}

// 获取删除状态文本
const getDeleteStatusText = (status) => {
  const statusMap = {
    '0': '正常',
    '1': '删除'
  }
  return statusMap[status] || ''
}

// 处理每页显示数量变化
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 切换每页数量时，通常重置到第一页
  fetchData() // 重新获取数据
}

// 处理当前页变化
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  fetchData() // 重新获取数据
}
</script>

<style scoped lang="scss">
/* 整体布局设置为黑色 */
.el-container {
  background-color: #000;
  color: #fff;
  height: 100vh;

  .el-header {
    background-color: #000;
    color: #fff;
    padding: 20px;
  }

  .el-main {
    background-color: #000;
    padding: 20px;
  }

  .el-table {
    background-color: #1a1a1a;
    color: #fff;

    .el-table__header th {
      background-color: #2d2d2d;
      color: #fff;
    }

    .el-table__body tr {
      &:hover {
        background-color: #3d3d3d;
      }
    }
  }
}

/* 自定义弹窗样式 */
.custom-dialog {
  .el-dialog__header {
    background-color: #2d2d2d;
    color: #fff;
  }

  .el-dialog__body {
    background-color: #1a1a1a;
    color: #fff;
  }

  .el-dialog__footer {
    background-color: #2d2d2d;
  }
}

/* 自定义表单样式 */
.custom-form {
  .el-form-item__label {
    color: #fff;
  }

  .el-input,
  .el-select,
  .el-date-picker {
    .el-input__inner {
      background-color: #2d2d2d;
      color: #fff;
      border-color: #4d4d4d;

      &::placeholder {
        color: #888;
      }
    }
  }

  .el-textarea {
    .el-textarea__inner {
      background-color: #2d2d2d;
      color: #fff;
      border-color: #4d4d4d;

      &::placeholder {
        color: #888;
      }
    }
  }

  .el-radio {
    color: #fff;
  }
}

/* 新增表格单元格溢出样式 */
.el-table .cell {
  white-space: nowrap; /* 强制不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号（可选，配合tooltip使用时可省略） */
}
</style>
